<template>
    <page>
        <m-header2 title="用户编号" :rightText="userCode"></m-header2>
        <p class="h40 px12 f16 text3">为了确保服务质量 ，请完善你的信息</p>
        <group gutter="0">
            <x-input title="<span class='c7'>*</span>姓名" placeholder="请输入姓名" text-align="right"
                     placeholder-align="right" v-model="form.realName"></x-input>

            <popup-radio title="性别" :options="sexOptions" v-model="form.sex" :show.sync="radioShow"></popup-radio>

            <datetime title="<span class='c7'>*</span>出生日期" v-model="form.birthday" :show.sync="datetimeShow"
                      :min-year="1950"
                      year-row="{value}年" month-row="{value}月" day-row="{value}日"></datetime>
        </group>
        <group>
            <cell title="车牌号" is-link @click.native="licencePlateShow = true">{{form.carCode}}</cell>

            <cell title="工作地址" is-link @click.native="showCity = true">{{form.address}}</cell>
        </group>
        <m-button class="mx12 mt40" @click.native="submit">提交</m-button>

        <lazy-render :time="300">
            <!-- 车牌输入键盘 begin-->
            <licence-plate :show.sync="licencePlateShow" v-model="form.carCode"></licence-plate>
            <!-- 车牌输入键盘 end-->
        </lazy-render>

        <lazy-render :time="300">
            <!-- 城市选择器 begin -->
            <select-city v-model="form.address" :show.sync="showCity"></select-city>
            <!-- 城市选择器 end-->
        </lazy-render>

    </page>
</template>
<script>
  import licencePlate from '@/components/licencePlate'
  import selectCity from '@/components/form/popupSelect/city'
  import Vue from 'vue'
  import { closePop } from '../utils/tiny'

  export default {
    data () {
      const {id, address, carCode, sex, birthday, realName, userCode} = this.$store.getters.userInfo
      return {
        licencePlateShow: false,
        showCity: false,
        datetimeShow: false,
        radioShow: false,
        userCode,
        sexOptions: [{
          key: '1',
          value: '男'
        }, {
          key: '0',
          value: '女'
        }],
        form: {
          id,
          address,
          birthday: Vue.filter('dateFormat')(birthday, 'YYYY-MM-DD'),
          carCode,
          realName,
          sex: String(+sex)
        }
      }
    },
    computed: {},
    methods: {
      async submit () {
//        const nameCheck = [this.form.name, ('请输入用户名称')]
//        const mobileCheck = [this.form.mobile,phone('请绑定手机号')]
//        const carCodeCheck = [this.form.carCode, ('请输入车牌号')]
//        const addressCheck = [this.form.address, ('请输地址')]
//        if (!checker(nameCheck,mobileCheck, carCodeCheck, addressCheck)) return;
        try {
          let form = {...this.form}
          form.sex = !!+form.sex
          let body = await this.$post_json_loading('member/updateUser', form)
          m_toast('修改成功')
          this.$store.dispatch('updateUserInfo')
          history.back()
        } catch (e) {
          m_toast('修改失败')
          console.error(e)
        }
      },
      closePop () {
        return closePop(this, 'licencePlateShow', 'showCity', 'datetimeShow', 'radioShow')
      },
    },
    beforeRouteLeave (to, from, next) {
      next(this.closePop())
    },
    components: {
      licencePlate,
      selectCity
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
